<script setup lang="ts">
import type { IPage } from '@fl/api/bidding-api/model/base'
import type { ISelectOpenData } from '@fl/api/bidding-api/model/bidding'

import { ArrowRight } from '@element-plus/icons-vue'
import { useSelectOpenRaceAnnouncementVoList } from '@fl/api/bidding-api'
import { ref } from 'vue'

// import { FlowCatchOption } from '../../../constants/index'

const FlowCatchOption = {
    // 终止
    1: '终止',
    // 流标
    2: '流标',
    // 废标
    3: '废标',
    // 延期
    4: '延期',
}

function openTender(val: any) {
    window.open(`${import.meta.env.VITE_TENDER_PATH}${val}`, '_blank')
}

const firstTabValue = ref('2')
const firstTab = ref([
    {
        name: '1',
        title: '招采信息',
    },
    // {
    //     name: '2',
    //     title: '城建集团',
    // },
])

const secondTabValue = ref('1')
const SecondTab = ref([
    {
        name: '1',
        title: '招标公告',
    },
    {
        name: '2',
        title: '中标公告',
    },
    {
        name: '4',
        title: '变更公告',
    },
    {
        name: '3',
        title: '其他公告',
    },
])

watch(secondTabValue, (value) => {
    payload.value.announcementType = Number(value)
})

function tableRowClassName({
    rowIndex,
}: {
    rowIndex: number
}) {
    if (rowIndex % 2 === 0) {
        return 'warning-row'
    }
    return ''
}
// 公告状态
const payload = ref<ISelectOpenData>({ announcementType: Number(secondTabValue.value) })
const page = ref<IPage>({ pageNum: 1, pageSize: 8 })
const { data } = useSelectOpenRaceAnnouncementVoList(page, payload)

function toApply(data: any) {
    const { announcementId, biddingId } = data
    // push({ path: '/apply', query: {
    //     announcementId,
    //     biddingId,
    // } })
    openTender(`/apply?announcementId=${announcementId}&biddingId=${biddingId}`)
}
</script>

<template>
    <div class="container relative">
        <div class="demo-tabs-right absolute right-12 top-5 z-1">
            <el-link :underline="false"
                     @click="openTender(`/non-tender?first=${firstTabValue}&second=${secondTabValue}`)"
            >
                <span class="font-size-20 flex"
                      style="align-items: center"
                >

                    查看更多<el-icon><ArrowRight /></el-icon>
                </span>
            </el-link>
        </div>

        <el-tabs v-model="firstTabValue"
                 class="firstTab"
        >
            <el-tab-pane v-for="item in firstTab"
                         :key="item.name"
                         :label="item.title"
                         :name="item.name"
            />
        </el-tabs>

        <el-tabs v-model="secondTabValue"
                 type="card"
                 class="secondTab"
        >
            <el-tab-pane v-for="item in SecondTab"
                         :key="item.name"
                         class="zzzzzzz b-none"
                         :label="item.title"
                         :name="item.name"
            />
        </el-tabs>

        <el-table :data="data?.rows"
                  show-overflow-tooltip
                  style="width: 100%"

                  :row-class-name="tableRowClassName"
                  @row-click="(row: any) => {
                      toApply(row)
                  }"
        >
            <el-table-column prop="publishedTime"
                             label="发布时间"
                             width="120"
                             :formatter="(row) => {
                                 return row.publishedTime ?? '-';
                             }"
            />

            <el-table-column v-if="secondTabValue === '1'"
                             prop="applicationEndTime"
                             label="报名截止时间"
                             :formatter="(row) => {
                                 return row.applicationEndTime ?? '-';
                             }"
            />

            <el-table-column prop="title"
                             label="公告标题"
            />

            <el-table-column v-if="secondTabValue === '4'"
                             prop="abnormalProcess"
                             label="变更类型"
                             width="100"
            >
                <template #default="scope">
                    {{ FlowCatchOption[scope.row.abnormalProcess] }}
                </template>
            </el-table-column>

            <el-table-column prop="company"
                             label="所属公司"
            />

            <el-table-column v-if="secondTabValue === '2'"
                             prop="winningBidder"
                             label="中标单位"
            >
                <template #default="scope">
                    {{ scope.row.winningBidder ? scope.row.winningBidder.join(',') : '' }}
                </template>
            </el-table-column>

            <el-table-column v-if="secondTabValue === '1'"
                             prop="status"
                             label="公告状态"
            >
                <template #default="{ row }">
                    <el-link v-if="row.abnormalProcess !== null"
                             :underline="false"
                             type="warning"
                    >
                        已{{ FlowCatchOption[row.abnormalProcess] }}
                    </el-link>

                    <el-link v-else-if="row.status === '正在报名'"
                             :underline="false"
                             type="success"
                    >
                        {{ row.status }}
                    </el-link>

                    <el-link v-else-if="row.status === '报名结束'"
                             :underline="false"
                             type="warning"
                    >
                        {{ row.status }}
                    </el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isLoading"
                     :data="data?.rows"
                     @page-change="handlePageChange"
        >
            <template #operate="{ row }">
                <el-button text>
                    查看{{ row }}
                </el-button>

                <el-button type="primary"
                           text
                >
                    编辑
                </el-button>
            </template>
        </SearchTable> -->
    </div>
</template>

<style scoped lang="scss">
.container {
    :deep(.firstTab.el-tabs) {
        .el-tabs__nav-scroll {
            .el-tabs__item {
                font-size: 26px;
            }

            .el-tabs__nav {
                height: 50px;
            }
        }
    }

    :deep(.secondTab.el-tabs) {
        .el-tabs__header {
            border: none;
        }

        .el-tabs__nav-scroll {
            .el-tabs__item {
                font-weight: bold;
            }

            .el-tabs__nav,
            .el-tabs__item {
                border: none !important;
            }
        }
    }
}

:deep(.el-tabs__new-tab) {
    border: none;
    // width: 100px;
}

:deep(.el-table .warning-row) {
    background-color: #f5f7fa !important;
}
</style>
